<template>
	<div class="home">
		<div class="home-header">
			<div class="home-header-list">
				<li class="el-icon-user icon"></li>
				<div class="list-title">
					<span>读者</span>
					<h4>{{ num.uTotal }}</h4>
				</div>
			</div>
			<div class="home-header-list">
				<li class="el-icon-odometer icon"></li>
				<div class="list-title">
					<span>人流量</span>
					<h4>{{ num.people }}</h4>
				</div>
			</div>
			<div class="home-header-list">
				<li class="el-icon-circle-close icon"></li>
				<div class="list-title">
					<span>借出</span>
					<h4>{{ num.nTotal }}</h4>
				</div>
			</div>
			<div class="home-header-list">
				<li class="el-icon-circle-check icon"></li>
				<div class="list-title">
					<span>归还</span>
					<h4>{{ num.yTotal }}</h4>
				</div>
			</div>
		</div>
		<div class="home-main">
			<div ref="chartLeft" class="home-main-left"></div>
			<div ref="chartRight" class="home-main-right"></div>
		</div>
	</div>
</template>

<script>
import { getHomeMsgAPI } from '@/api'
export default {
	data() {
		return {
			num: {},
			bookRank: [
			],
			classifyTool: {}
		};
	},
	mounted() {
		this.getMsg()
	},
	methods: {
		getMsg() {
			getHomeMsgAPI().then(res => {
				this.num = res.data.data.num
				this.bookRank = res.data.data.bookRank
				this.classifyTool = res.data.data.classifyTool
				console.log(res.data.data);
				this.getEchartData();
			})
		},
		getEchartData() {
			const chartLeft = this.$refs.chartLeft;
			if (chartLeft) {
				const myChart = this.$echarts.init(chartLeft);
				const option = {
					title: {
						text: '热门图书排行榜',
						left: 'center'
					},
					tooltip: {
						trigger: 'item'
					},
					legend: {
						orient: 'vertical',
						left: 'left'
					},
					series: [
						{
							name: 'Access From',
							type: 'pie',
							radius: '50%',
							data: this.bookRank,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}
					]
				};
				myChart.setOption(option);

				window.addEventListener('resize', function () {
					myChart.resize();
				});
			}
			const chartRight = this.$refs.chartRight;
			if (chartRight) {
				const myChart = this.$echarts.init(chartRight);
				const option = {
					title: {
						text: '图书分类统计',
						left: 'center'
					},
					xAxis: {
						type: 'category',
						data: this.classifyTool.cName
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							data: this.classifyTool.cNum,
							type: 'bar'
						}
					]
				};
				myChart.setOption(option);

				window.addEventListener('resize', function () {
					console.log(1);
					myChart.resize();
				});
			}
			// 使用 this.$on/$once('hook:生命周期', callback) 就可以监听到生命周期的变化了。
			this.$on('hook:destroyed', () => {
				window.removeEventListener('resize', function () {
					myChart.resize();
				});
			});
		}
	},
	watch: {},

};
</script>
<style scoped>
.home {
	width: 100%;
	height: 100%;
}

.home-header {
	/* height: 70px; */
	height: 12%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 30px;
}

.home-header-list {
	/* width: 320px; */
	width: 24%;
	/* height: 70px; */
	height: 100%;
	padding: 0 20px;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 5px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.list-title {
	width: 50px;
	/*  calc：是一个css自带的计算方法，可以自动计算后返回px单位的值
100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。
*100：这里乘的100代表100px。
1920：设计稿的宽度 */
	font-size: calc(100vw * 20 / 1920);
}

.icon {
	font-size: 40px;
}

.home-main {
	width: 100%;
	height: 80%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.home-main-left {
	/* width: 490px; */
	width: 35%;
	/* height: 450px; */
	height: 100%;
	background-color: #fff;
	border-radius: 10px;
	line-height: 450px;
	padding-top: 40px;
	padding-left: 20px;
	box-sizing: border-box;
}

.home-main-right {
	/* width: 790px; */
	width: 60%;
	/* height: 400px; */
	height: 100%;
	line-height: 400px;

	background-color: #fff;
	background-color: #fff;
	border-radius: 10px;
	padding-top: 40px;
	box-sizing: border-box;
}
</style>
